<template>
	<view class="task">
		<view class="list">
			<view class="inp clearfix" @click="hidden = true">
				<view class="left fl">数据源</view>
				<view class="right fl clearfix">
					<view class="name fl">{{formData.name}}</view>
					<image src="../../../static/images/right.png" class="img fr"></image>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="inp inps clearfix">
				<view class="left fl">点赞客户视频</view>
				<view class="xuanze fr clearfix" v-if="formData.like">
					<view class="fir fl" @click="formData.like = true">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="sec fl" @click="formData.like = false">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
				<view class="xuanze fr clearfix" v-else>
					<view class="sec fl" @click="formData.like = true">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="fir fl" @click="formData.like = false">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
			</view>
			<view class="inp inps clearfix">
				<view class="left fl">收藏客户视频</view>
				<view class="xuanze fr clearfix" v-if="formData.favorite">
					<view class="fir fl" @click="formData.favorite = true">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="sec fl" @click="formData.favorite = false">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
				<view class="xuanze fr clearfix" v-else>
					<view class="sec fl" @click="formData.favorite = true">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="fir fl" @click="formData.favorite = false">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
			</view>
			<view class="inp inps clearfix">
				<view class="left fl">评论客户视频</view>
				<view class="xuanze fr clearfix" v-if="formData.comment">
					<view class="fir fl" @click="formData.comment = true">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="sec fl" @click="formData.comment = false">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
				<view class="xuanze fr clearfix" v-else>
					<view class="sec fl" @click="formData.comment = true">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="fir fl" @click="formData.comment = false">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
			</view>
			<view class="inp clearfix" v-if="formData.comment">
				<view class="left fl">评论内容</view>
			</view>
			<view class="textarea" v-if="formData.comment">
				<textarea placeholder-style="color:#787B8F" placeholder="默认评论" v-model="formData.comment_content"></textarea>
			</view>
		</view>
		<view class="list">
			<view class="inp inps clearfix">
				<view class="left fl">私信客户</view>
				<view class="xuanze fr clearfix" v-if="formData.message">
					<view class="fir fl" @click="formData.message = true">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="sec fl" @click="formData.message = false">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
				<view class="xuanze fr clearfix" v-else>
					<view class="sec fl" @click="formData.message = true">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="fir fl" @click="formData.message = false">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
			</view>
			<view class="inp clearfix" v-if="formData.message">
				<view class="left fl">私信内容</view>
			</view>
			<view class="textarea" v-if="formData.message">
				<textarea placeholder-style="color:#787B8F" placeholder="默认私信" v-model="formData.message_content"></textarea>
			</view>
		</view>
		<view class="footer" @click="submit">
			开始AI拓客
		</view>
		<view class="beijing" v-if="hidden"></view>
		<view class="tankuang" v-if="hidden">
			<view class="top">
				<view class="quxiao" @click="quxiao">取消</view>
				<view class="center">请选择</view>
				<view class="queren" @click="queren">确定</view>
			</view>
			<view class="bottom">
				<view :class="[xzId == item.id?'active':'']" @click="qiehuan(item.id)" v-for="(item,index) in dataList" :key="index">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';
	
	export default {
		data() {
			return {
				userData: [],
				dataList: [],
				hidden: false,
				xzId: 0,
				formData: {
					id: 0,//开发商家自增id
					name: '',
					like: true,
					favorite: true,
					comment: true,
					comment_content: '默认评论',
					message: true,
					message_content: '默认私信',
					user_id: '',
					team_id: '',
					business_id: '',
					name_list: [],
				}
			}
		},
		onLoad() {
			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;
				
				this.formData.user_id = this.userData.id;
				this.formData.team_id = this.userData.team_id;
				
				this.getList();
				
				// 抖音账号绑定
				this.getAccount();
			}).catch((error) => {});
		},
		methods: {
			submit(){
				uni.request({
					url: 'http://127.0.0.1:9999/api/devices/task',
					data: this.formData,
					method: 'POST',
					success: (res) => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			getAccount(){
				this.formData.name_list = [];
				
				request({
					url: '/api/user/cookielist',
					method: 'POST',
					data: {
						user_id: this.userData.id,
					},
				}).then((response) => {
					let list = response.data.list;
					for(let i=0;i<list.length;i++){
						this.formData.name_list.push(list[i].name)
					}
				}).catch((error) => {});
			},
			getList(){
				request({
					url: '/api/usergroupbuy/api_business_info_nopage',
					method: 'POST',
					data: {
						user_id: this.userData.id,
					},
				}).then((response) => {
					this.dataList = response.data.list;
					
					this.formData.id = response.data.list[0].id;
					this.formData.name = response.data.list[0].name;
					this.formData.business_id = response.data.list[0].business_id;
					this.xzId = response.data.list[0].id;
				}).catch((error) => {});
			},
			qiehuan(id){
				this.xzId = id;
			},
			quxiao(){
				this.hidden = !this.hidden;
			},
			queren(){
				for(let i=0;i<this.dataList.length;i++){
					if(this.dataList[i].id == this.xzId){
						this.formData.id = this.dataList[i].id;
						this.formData.name = this.dataList[i].name;
						this.formData.business_id =this.dataList[i].business_id;
					}
				}
				
				this.hidden = !this.hidden;
			}
		}
	}
</script>

<style scoped lang="scss">
	.task {
		width: 100%;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 60rpx;
	
		.list {
			width: 94%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			background: #242831;
			border-radius: 10rpx;
	
			.inp {
				width: 94%;
				margin: 0 auto;
				height: 88rpx;
				line-height: 88rpx;
				box-sizing: border-box;
				
				.left{
					width: 30%;
					font-size: 30rpx;
					color: #FFFFFF;
				}
				
				.right{
					width: 70%;
					
					.name {
						font-size: 30rpx;
						color: #ABB0CC;
						width: 90%;
						text-align: right;
					}
						
					.img {
						margin-right: 10rpx;
						width: 16rpx;
						height: 28rpx;
						margin-top: 30rpx;
					}
					
					.input {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						text-align: right;
						color: #787B8F;
						margin-right: 10rpx;
						font-size: 28rpx;
					}
				}
				
				.xuanze{
					width: 40%;
					
					.fir{
						width: 50%;
						height: 88rpx;
						line-height: 88rpx;
						
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							margin-top: 28rpx;
							float: left;
						}
						
						text{
							display: inline-block;
							float: left;
							font-size: 30rpx;
							color: #ECDEA4;
						}
					}
					
					.sec{
						width: 50%;
						height: 88rpx;
						line-height: 88rpx;
						
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							margin-top: 28rpx;
							float: left;
						}
						
						text{
							display: inline-block;
							float: left;
							font-size: 30rpx;
							color: #ABB0CC;
						}
					}
				}
			}
			
			.inpacc{
				width: 94%;
				margin: 0 auto;
				
				.left{
					height: 88rpx;
					line-height: 88rpx;
					width: 30%;
					font-size: 30rpx;
					color: #FFFFFF;
				}
				
				.account{
					width: 100%;
					margin: 0 auto;
					
					text{
						display: inline-block;
						height: 60rpx;
						line-height: 60rpx;
						background: #242831;
						border: 2rpx solid #FFFFFF;
						border-radius: 5rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						padding: 0 26rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
					
					.active{
						background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
						color: #806B1A;
						border: 2rpx solid #EAC59F;
					}
				}
			}
			
			.inps{
				border-bottom: 1rpx solid #31353E;
			}
	
			.textarea {
				width: 94%;
				margin: 0 auto;
				border-radius: 10rpx;
				padding-bottom: 20rpx;
	
				textarea {
					width: 100%;
					height: 120rpx;
					background: #1C1E22;
					padding: 3%;
					box-sizing: border-box;
					font-size: 30rpx;
					color: #787B8F;
					border: 1rpx solid #454B57;
					border-radius: 10rpx;
				}
			}
		}
	
		.footer {
			width: 94%;
			margin: 0 auto;
			margin-top: 120rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
			color: #806B1A;
			font-size: 36rpx;
		}
	
		.beijing {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: #000;
			opacity: 0.5;
			z-index: 10;
		}
	
		.tankuang {
			width: 100%;
			height: 432rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 20;
			background: #242831;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
	
			.top {
				width: 94%;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				position: relative;
	
				.center {
					font-size: 30rpx;
					color: #FFFFFF;
				}
	
				.quxiao {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 30rpx;
					color: #999999;
				}
	
				.queren {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 30rpx;
					color: #ECDEA4;
				}
			}
	
			.bottom {
				width: 94%;
				margin: 0 auto;
				margin-top: 20rpx;
				height: 300rpx;
				overflow-y: scroll;
	
				view {
					width: 100%;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					font-size: 30rpx;
					color: #CCCCCC;
				}
	
				.active {
					font-size: 30rpx;
					color: #806B1A;
					background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>